<template>
  <div class="display-flex">
    <div class="login-left">
      <!-- <img class="logo" src="@/assets/images/logo.png" alt="" /> -->
      <div class="languageSwitch display-flex align-items-center">
        <img src="@/assets/images/login/ic_language.png" alt="" />
        <el-select
          v-model="languageValue"
          class="select-with-suffix"
          style="width: 100px; margin-left: 5px"
        >
          <el-option
            v-for="item in languageOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <div class="login-right bg-fff">
      <div class="right-logo">
        <img
          class="w-100 h-100"
          src="@/assets/images/login/right-logo.png"
          alt=""
        />
      </div>
      <div class="login-box w-100">
        <h2 class="font-size-24 font-weight-500 color-00085">登录</h2>
        <p class="login-box-slogan font-size-14">
          轻松登录，畅享智慧教学新体验。
        </p>
        <el-form
          ref="loginRef"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
        >
          <el-form-item prop="tenantId">
            <div class="display-flex tenantrySelect college w-100">
              <el-select
                class="w-100 h-100"
                v-model="loginForm.tenantId"
                placeholder="请选择你的学院"
                @change="sfssolg"
              >
                <el-option
                  v-for="item in tenantryOptions"
                  :key="item.tenantId"
                  :label="item.companyName"
                  :value="item.tenantId"
                >
                </el-option>
              </el-select>
              <img
                class="select-icon"
                src="@/assets/images/login/ic_college.png"
                alt=""
              />
            </div>
          </el-form-item>
          <el-form-item prop="username">
            <div class="tenantrySelect w-100">
              <el-input v-model="loginForm.username" placeholder="请输入账号" />
              <img
                class="select-icon"
                src="@/assets/images/login/ic_user.png"
                alt=""
              />
            </div>
          </el-form-item>
          <el-form-item prop="password">
            <div class="tenantrySelect w-100">
              <el-input
                v-model="loginForm.password"
                placeholder="请输入密码"
                type="password"
                show-password
                style="letter-spacing: 5px; font-family: monospace"
              />
              <img
                class="select-icon"
                src="@/assets/images/login/ic_password.png"
                alt=""
              />
            </div>
          </el-form-item>
          <el-form-item prop="code">
            <div class="display-flex w-100">
              <div class="tenantrySelect verificationCode">
                <el-input
                  v-model="loginForm.code"
                  placeholder="验证码"
                  @keyup.enter="handleLogin"
                />
                <img
                  class="select-icon"
                  src="@/assets/images/login/ic_verificationcode.png"
                  alt=""
                />
              </div>
              <div class="code-img">
                <img
                  :src="codeUrl"
                  class="login-code-img h-100"
                  @click="getCode"
                />
              </div>
            </div>
          </el-form-item>
          <div class="display-flex flex-between font-size-14">
            <div>
              <el-checkbox v-model="loginForm.rememberMe" class="color-00085"
                >自动登录</el-checkbox
              >
            </div>
            <div class="color-0F63ED">忘记密码 ?</div>
          </div>
          <el-button
            class="login-button w-100 font-size-16"
            @click="handleLogin"
            >登录</el-button
          >
          <div class="otherWays font-size-16 color-00065 text-center">
            其他登录方式
          </div>
          <div class="loginType display-flex flex-center">
            <div class="wechat cursor-pointer">
              <img src="@/assets/images/login/ic_wechat.png" alt="" />
            </div>
            <div class="other cursor-pointer">
              <img src="@/assets/images/login/ic_more.png" alt="" />
            </div>
            <!-- <div class="other cursor-pointer" @click="doSocialLogin('zafu')">
              <img
                src="../../assets/images/login/logo.png"
                class="wechat-img"
              />
            </div> -->
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import {
  login,
  getTenantList,
  getCodeImg,
  getUserInfo,
  authBinding,
  getTenant
} from '@/services/login'
import { useUserStore } from '@/stores/modules/user'
import { applyTenantConfig } from '@/utils/crypto'
import { useRouter } from 'vue-router'
const userStore = useUserStore()
const router = useRouter()
const codeUrl = ref('')
const languageValue = ref('简体中文')
const tenantryOptions: any = ref([])
const loginRef: any = ref('')
const redirect = ref('/')
import { ElMessage } from 'element-plus'

// 验证码开关
const captchaEnabled = ref(true)
const languageOptions = ref([
  {
    label: '简体中文',
    value: 'defaultValue'
  },
  {
    label: 'English',
    value: 'English'
  }
])

const loginForm = ref({
  tenantId: '',
  username: '',
  password: '',
  // tenantId: '000000',
  // username: 'admin',
  // password: 'admin123',
  // username: '202311060220',
  // password: '666666',
  rememberMe: false,
  code: '',
  uuid: ''
})

//获取租户列表
const getTenantLists = async () => {
  const res = await getTenantList()
  tenantryOptions.value = res.data.voList
  loginForm.value.tenantId = tenantryOptions.value[0].tenantId
  //sfssolg(tenantryOptions.value[0].tenantId)
}
onMounted(async () => {
  getTenantLists()
  getCode()
})

const loginRules = {
  tenantId: [
    { required: true, trigger: 'blur', message: '请输入您的租户编号' }
  ],
  username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
  password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
  code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
}

// 获取验证码
const getCode = async () => {
  const res: any = await getCodeImg()
  const { data } = res
  captchaEnabled.value =
    data.captchaEnabled === undefined ? true : data.captchaEnabled
  if (captchaEnabled.value) {
    codeUrl.value = 'data:image/gif;base64,' + data.img
    loginForm.value.uuid = data.uuid
  }
}

// 登录
const handleLogin = () => {
  loginRef.value?.validate(async (valid: boolean, fields: any) => {
    if (valid) {
      // 勾选了需要记住密码设置在 localStorage 中设置记住用户名和密码
      if (loginForm.value.rememberMe) {
        localStorage.setItem('tenantId', String(loginForm.value.tenantId))
        localStorage.setItem('username', String(loginForm.value.username))
        localStorage.setItem('password', String(loginForm.value.password))
        localStorage.setItem('rememberMe', String(loginForm.value.rememberMe))
      } else {
        // 否则移除
        localStorage.removeItem('tenantId')
        localStorage.removeItem('username')
        localStorage.removeItem('password')
        localStorage.removeItem('rememberMe')
      }
      const headers = {
        isEncrypt: true
      }
      const res = await login(loginForm.value, headers)
      if (res.code === 200) {
        const token = res.data.access_token
        userStore.setToken(token)
        // 获取用户信息
        const userRes = await getUserInfo()
        if (userRes.code == 200) {
          userStore.setPermissions(userRes.data.permissions)
          userStore.setUserInfo(userRes.data.user)
          userStore.setRoles(userRes.data.roles)
        }
        // 获取租户logo/系统名称
        const tenantId = loginForm.value.tenantId
        const tenantRes = await getTenant(tenantId)
        if (tenantRes.code == 200) {
          // 登录成功时
          applyTenantConfig(tenantRes.data)
          // 存租户信息
          userStore.setTenant(tenantRes.data)
        }
        router.push('/')
      } else {
        // 处理错误并显示弹窗
        ElMessage.error(res.msg)
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
//切换单点
const sfssolg = async (value: any) => {
  const ssolog = tenantryOptions.value.find(
    (item: any) => item.tenantId == value
  ).ssoLogin
  if (ssolog == 1) {
    doSocialLogin('zafu')
  }
}

/**
 * 第三方登录
 * @param type
 */

const doSocialLogin = (type: string) => {
  authBinding(type, {
    tenantId: loginForm.value.tenantId,
    domain: window.location.origin
  }).then((res: any) => {
    if (res.code === 200) {
      // 获取授权地址跳转
      window.location.href = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })
}
</script>

<style lang="scss" scoped>
.login-left {
  width: 68%;
  height: 100vh;
  background-image: url('@/assets/images/login/login-leftbg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  .logo {
    width: 171px;
    height: 32px;
    margin-top: 12px;
    margin-left: 20px;
  }
  .el-select .el-select__caret {
    background-image: url('@/assets/images/login/ic_down.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 16px;
    height: 16px;
    display: inline-block;
    color: transparent;
    margin-left: 0px;
  }
  .el-select:hover:not(.el-select--disabled) .el-input__wrapper,
  .el-select .el-input__wrapper.is-focus,
  .el-select .el-input.is-focus .el-input__wrapper {
    box-shadow: none !important;
  }
  .el-input__wrapper {
    padding: 0px 6px;
    box-sizing: border-box;
  }
  .languageSwitch {
    position: absolute;
    left: 39px;
    bottom: 25px;
    img {
      width: 16px;
      height: 16px;
    }
  }
  .el-input__wrapper {
    box-shadow: none;
    background: none;
  }
  .el-input__inner {
    height: 16px;
  }
}
.login-right {
  width: 32%;
  background-image: url('@/assets/images/login/login-rightbg.png');
  background-repeat: no-repeat;
  background-size: 100% 260px;
  background-position: 0px 0px;
  position: relative;
  .right-logo {
    width: 80px;
    height: 80px;
    margin: 40px auto;
  }
  .login-box {
    top: 140px;
    left: 0px;
    padding: 0 32px;
    box-sizing: border-box;
    .login-form {
      .el-form-item {
        margin-bottom: 32px;
      }
    }
    .tenantrySelect {
      height: 40px;
      position: relative;
      .select-icon {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 10px;
        left: 10px;
      }
      .el-input__wrapper {
        padding-left: 36px;
        box-sizing: border-box;
      }
      .el-tooltip__trigger,
      .el-input {
        height: 100%;
      }
    }
    .verificationCode {
      width: 75%;
      margin-right: 5%;
    }
    .code-img {
      width: 20%;
      height: 40px;
      background: #f5f3fd;
      border-radius: 4px 4px 4px 4px;
    }
    .login-button {
      height: 48px;
      border-radius: 4px;
      margin-top: 56px;
      margin-bottom: 32px;
      background: #0f63ed !important;
      color: #fff !important;
    }
    .el-button:focus,
    .el-button:hover {
      background: #0f63ed;
      color: #fff;
    }
    .el-button:hover {
      background: #0f63ed;
      color: #fff;
    }
    .login-box-slogan {
      color: #777;
      margin-top: 6px;
      margin-bottom: 24px;
    }
    .otherWays::before,
    .otherWays::after {
      content: '';
      display: inline-block;
      width: 140px;
      height: 1px;
      background: #e8e8e8;
      margin: 6px 12px;
    }
  }
  .loginType {
    margin-top: 30px;
    div {
      width: 40px;
      height: 40px;
    }
    .wechat {
      margin-right: 40px;
    }
  }
}
:deep(.el-input__inner) {
  margin-left: 22px;
}
:deep(.college .el-select__selected-item) {
  margin-left: 22px;
}
:deep(.el-select__wrapper) {
  height: 100%;
}
.wechat-img {
  margin-left: 20px;
}
</style>
